<template>
	<view class="content flex al-end">
		<image src="../static/--dis.svg" v-show="num <= min" class="image40"></image>
		<image src="../static/-.svg" v-show="num > min" @click.stop="minus" class="image40"></image>
		<input class="ml10 mr10" type="number" :value="num" @input="input" />
		<image src="../static/+.svg" @click.stop="add" v-show="num < max || max == -1" class="image40"></image>
		<image src="../static/+-dis.svg" v-show="max != -1 && num >= max" class="image40"></image>
	</view>
</template>

<script>
	export default {
		name:"numberBox",
		props:{
			min:{
				type:Number,
				default:1
			},
			max:{
				type:Number,
				default:-1
			},
			value:{
				type:[String,Number],
				default:1
			},
		},
		data(){
			return{
				num:1
			}
		},
		watch:{
			value:{
				handler(newVal){
					this.num = parseInt(newVal)
				},
				immediate:true
			}
		},
		methods:{
			minus(){
				this.change(this.num-1)
			},
			add(){
				this.change(this.num+1)
			},
			legalValue(val){
				let newVal = val
				if(newVal && String(parseInt(newVal)) !== 'NaN'){
					newVal = parseInt(newVal)
					if(newVal < this.min){
						newVal = this.min
					}else if(this.max != -1 && newVal > this.max){
						newVal = this.max
					}
				}else if(String(parseInt(newVal)) === 'NaN'){
					newVal = ''
				}
				return newVal
			},
			input(e){
				this.change(this.legalValue(e.detail.value))
			},
			change(val){
				if(val != this.value){
					this.$emit('input',val)
				}else{
					// 重置一下值
					this.num = ''
					setTimeout(()=>{
						this.num = val
					})
				}
				this.$emit('change',val)
			},
		}
	}
</script>

<style scoped lang="scss">
	input{
		width: 2em;
		text-align: center;
	}
.content{
}
</style>